<!DOCTYPE html>
<html lang="en">
    {% load static %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script src="../static/layui/layui.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <script src="../static/xm-select-master/dist/xm-select.js"></script>
</head>

<body>
    <div class="utdm">
        <div class="utdm_mwuk">
            <a href="{% url 'rgck' %}"><img src="{% static 'img/loog.png' %}" class="utdm_img"></a>
            <div>
                {% if current_etyn == None %}
                <a href={% url 'logn' %}><span>登录</span></a>
                {% else %}
                <div>
                <ul class="layui-nav" lay-bar="disabled">
                    <li class="layui-nav-item" lay-unselect="">
                    <img src="/media/{{current_etyn.mtkg_img}}" class="layui-nav-img"></a>
                    <dl class="layui-nav-child">
                        <dd style="text-align: center;"><a href={% url 'tcdl' %}>退出登录</a></dd>
                    </dl>
                    </li>
                </ul>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    <div class="dmdm_ukwv">
        <div class="dmdm-left">
            <ul>
                <a href="{% url 'rgck' %}">
                    <li class="tfkh-uqjs01">歌曲管理</li>
                </a>
                <a href="{% url 'skuj_tpgj' %}">
                    <li class="tfkh-uqjs01">歌单管理</li>
                </a>
                <a href="{% url 'etyn_tpgj' %}">
                    <li class="tfkh-uqjs">用户管理</li>
                </a>
                <a href={% url 'lwrt_tpgj' %}>
                    <li class="tfkh-uqjs01">轮播管理</li>
                </a>
            </ul>
        </div>
        <div class="dmdm-rigth">
            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="100">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                </colgroup>
                <thead>
                    <tr>
                        <th>用户名</th>
                        <th>创建时间</th>
                        <th>用户账号</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for i in ovtn%}
                    <tr>
                        <td>{{i.jntq}}</td>
                        <td>{{i.etyn_time}}</td>
                        <td>{{i.mtkg}}</td>
                        <td>
                            <a class="layui-btn layui-btn-xs layui-btn-primary" onclick="edit('{{i.mtkg}}')">删除</a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
    function edit(id){
        layer.confirm('是否删除用户', {
                btn: ['取消','确定'] //按钮
                }, function(){
                layer.msg('操作取消', {icon: 1});
                }, function(){
                    var eid = id
                    $.ajax({
                        type:"POST",
                        url:"etyn_tpgj",
                        data:{'id':eid},
                        headers: { "X-CSRFToken": "{{ csrf_token }}" },
                        success:function(data){
                            var a = JSON.stringify(data.data);
                            layer.msg(a)
                            window.location.href='etyn'
                        }
                    })
            });
    }
</script>
<style>
    .utdm {
        width: 100%;
        height: 60px;
        position: fixed;
        border-bottom: 1px black solid;
        background-color: white;
    }

    .utdm_mwuk {
        width: 1080px;
        position: fixed;
        margin: auto;
        right: 0;
        left: 0;
        top: 0;
        display:flex;
        justify-content: space-between;
    }

    .layui-nav{
        background-color:#ffffff;
    }

    .utdm_img {
        height: 60px;
        width: auto;
    }

    .dmdm_ukwv {
        width: 1080px;
        margin: 0 auto;
    }

    .dmdm-left {
        width: 200px;
        height: 100vh;
        border-right: 1px black solid;
        float: left;
    }

    .dmdm-rigth {
        padding-top: 60px;
        width: 870px;
        float: right;
    }

    .dmdm-left ul {
        padding-top: 60px;
    }

    .dmdm-left ul a li {
        width: 100%;
        height: 50px;
        font-size: 18px;
        text-align: center;
        line-height: 50px;
    }

    .tfkh-uqjs {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.74));
        color: white;
    }

    .tfkh-uqjs01:hover {
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.74));
        color: white;
    }
</style>

</html>